<template>
  <div class="app-container">
    <el-form :inline="true" :model="query" size="small">
      <el-form-item label="学员姓名">
        <el-input v-model="query.studentName" placeholder="学员姓名" clearable />
      </el-form-item>
      <el-form-item label="签约时间">
        <el-date-picker
          v-model="filter.date"
          :picker-options="pickerOptions"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="toQuery">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="betterData" :span-method="mergeRow">
      <el-table-column type="index" label="序号" width="55">
        <template slot-scope="scope">
          <span>{{ scope.row.idx + (page - 1) * size + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="className" label="学员姓名" width="80">
        <template slot-scope="scope">
          <router-link :to="`/education/student/${scope.row.merchantStudentId}`">
            <el-button type="text">{{ scope.row.name }}</el-button>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="school" label="所在学校" min-width="160" />
      <el-table-column prop="signDate" label="首次签约日期">
        <template slot-scope="scope">
          {{ scope.row.signDate | formatDate('yyyy-MM-dd') }}
        </template>
      </el-table-column>
      <el-table-column prop="opName" label="归属咨询师"/>
      <el-table-column label="课程订购信息">
        <el-table-column prop="merchantCourseName" label="订购课程" min-width="160" />
        <el-table-column prop="bookHour" label="订购课时" />
        <el-table-column prop="largessHour" label="赠送课时" />
        <el-table-column prop="discount" label="课时折扣" />
        <el-table-column prop="courseStatusName" label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.courseStatus | statusFilter">{{ scope.row.courseStatusName }}</el-tag>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="amount" label="账户余额（元）"/>
      <el-table-column prop="freezeAmount" label="订购金额（元）"/>
      <el-table-column label="可订金额（元）">
        <template slot-scope="scope">
          {{ scope.row.amount - scope.row.freezeAmount }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleRecharge(scope.row.merchantStudentId)">充值</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pg-wrapper">
      <el-pagination
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="sizeChange"
        @current-change="pageChange"/>
    </div>
    
    <!-- 充值 -->
    <recharge-dialog :visible="payDialogVisible" :student-id="payDialogStudentId" @close="payDialogClose"/>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import RechargeDialog from '../../components/RechargeDialog'
const STATUS_PAID = 1
const STATUS_FORBIDDEN = 11
export default {
  components: {
    RechargeDialog
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        2: 'warning',
        3: 'success',
        4: 'plain',
        9: 'success',
        10: 'danger',
        11: 'danger'
      }
      return statusMap[status]
    }
  },
  mixins: [initData],
  data() {
    return {
      query: {},
      filter: {
        date: []
      },
      loading: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      payDialogVisible: false,
      payDialogStudentId: 0
    }
  },
  computed: {
    betterData() {
      return this.data.reduce((all, curr, idx) => {
        const courseInfoList = curr.courseInfoList
        if (Array.isArray(courseInfoList) && courseInfoList.length > 0) {
          const rowCollapse = courseInfoList.length
          courseInfoList.forEach((courseInfoList, index) => {
            let rowColSpan = rowCollapse > 1 ? (index === 0 ? [rowCollapse, 1] : [0, 0]) : [1, 1]
            all.push({ ...curr, ...courseInfoList, rowColSpan, idx })
          })
        } else {
          all.push({ ...curr, rowColSpan: [1, 1], idx })
        }
        return all
      }, [])
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    beforeInit() {
      this.url = '/customer/student/list'
      const sort = 'sign_date desc'
      if (this.filter.date != '' && this.filter.date != null) {
        this.query.date = this.filter.date.join(',')
      }
      this.params = {
        studentName: this.query.studentName,
        date: this.query.date,
        page: this.page,
        size: this.size,
        sort: sort
      }
      return true
    },
    mergeRow({ row, column, rowIndex, columnIndex }) {
      if ([5, 6, 7, 8, 9].indexOf(columnIndex) === -1) {
        return row.rowColSpan
      }
    },
    // 是否已经缴费
    isBooked(status) {
      return (status > STATUS_PAID && status < STATUS_FORBIDDEN) || status === STATUS_FORBIDDEN
    },
    handleRecharge(merchantStudentId) {
      this.payDialogStudentId = merchantStudentId
      this.payDialogVisible = true
    },
    payDialogClose(isForce) {
      this.payDialogVisible = false
      if (isForce) {
        this.$nextTick(() => {
          this.init()
        })
      }
    }
  }
}

</script>

<style>

</style>
